<template>
    [
    <template v-for="(item, index) in AnsArray">
        <div style="width: 300px; padding: 5px 0 0 16px" v-if="item.type == 'Function'">
            <span>async function (val, FormItem) {</span>
            <a-textarea v-model:value="item.value"></a-textarea>}
            <a-popconfirm title="是否删除？" @confirm="DeleteItem(index)">
                <span class="Delete">
                    <delete-outlined />
                </span>
            </a-popconfirm>
            <span v-if="index != AnsArray.length - 1" style="padding: 0 8px 0 0">,</span>
        </div>
        <span class="Rule" v-else>
            {{ item.value }}
            <a-popconfirm title="是否删除？" @confirm="DeleteItem(index)">
                <span class="Delete">
                    <delete-outlined />
                </span>
            </a-popconfirm>
            <span v-if="index != AnsArray.length - 1" style="padding: 0 8px 0 0">,</span>
        </span>
    </template>
    ]

    <a-dropdown :trigger="['click']">
        <a-button>
            添加
            <DownOutlined />
        </a-button>
        <template #overlay>
            <a-menu @click="AddOptions">
                <template v-for="item in RulesArray">
                    <a-menu-item v-if="!inAns(item)" :key="item.value">
                        <span>{{ item.name }}</span>
                    </a-menu-item>
                </template>
            </a-menu>
        </template>
    </a-dropdown>
</template>
<script setup>
import { ref } from "vue";
import { DownOutlined, DeleteOutlined } from "@ant-design/icons-vue";
const AnsArray = ref([]);
const RulesArray = ref([
    { name: "年份", value: "year" },
    { name: "数字", value: "number" },
    { name: "银行卡", value: "bankNum" },
    { name: "固定电话", value: "telephone" },
    { name: "正整数", value: "int" },
    { name: "手机号", value: "phone" },
    { name: "是否全部为中文", value: "allChinese" },
    { name: "是否包含中文", value: "haveChinese" },
    { name: "身份证号", value: "idCard" },
    { name: "URL", value: "url" },
    { name: "邮箱", value: "email" },
    { name: "特殊字符", value: "Special" },
    { name: "必填", value: "required" },
    { name: "异步方法", value: "Function" },
]);
const inAns = (item) => {
    var have = false;
    for (let i = 0; i < AnsArray.value.length; i++) {
        const element = AnsArray.value[i];
        if (element.value == item.value) {
            have = true;
            break;
        }
    }
    return have;
};

const AddOptions = (item) => {
    if (item.key != "Function") {
        AnsArray.value.push({ type: "basic", value: item.key });
    } else {
        AnsArray.value.push({ type: "basic", type: "Function", value: "\n  return false" });
    }
};

const DeleteItem = (index) => {
    AnsArray.value.splice(index, 1);
};
</script>
<style lang="less" scoped>
.Delete {
    padding: 0 4px;
    cursor: pointer;
}
</style>
